<template>
  <a-modal
    :title="form._id ? '编辑' : '新增'"
    :width="700"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" v-bind="$store.state.formLayout">
        <a-form-model-item label="标题" prop="title">
          <a-input v-model="form.title"/>
        </a-form-model-item>
        <a-form-model-item label="类型" prop="type">
          <a-select v-model="form.type" placeholder="请选择">
            <a-select-option value="0">工作</a-select-option>
            <a-select-option value="1">生活</a-select-option>
            <a-select-option value="2">学习</a-select-option>
            <a-select-option value="3">情感</a-select-option>
            <a-select-option value="4">其他</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="描述" prop="description">
          <a-input v-model="form.description" type="textarea"/>
        </a-form-model-item>
        <a-form-model-item label="上传">
          <a-upload
            ref="upload"
            list-type="picture-card"
            :file-list="fileList"
            accept=".jpg,.jpeg,.png"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <div v-if="fileList.length < 8">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { addObj, putObj, getObj } from '@/api/king/article'

export default {
  data () {
    return {
      visible: false,
      loading: false,
      form: {
        image: []
      },
      rules: {
        title: [{ required: true, message: '标题不能为空' }],
        type: [{ required: true, message: '类型不能为空' }],
        description: [{ required: true, message: '描述不能为空' }],
      },
      fileList: []
    }
  },
  methods: {
    init(record) {
      this.visible = true
      this.form = record || {}
      this.form.id && getObj(this.form._id).then(res =>{
        this.form = res.data
        this.fileList = [...res.data.image]
        this.fileList.forEach((item,index) => {
          item.uid = index
        })
      })
    },
    // URL.createObjectURL(info.file.originFileObj)
    // 图片
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return false
    },
    handleCancel() {
      this.visible = false
      this.loading = false
    },
    handleOk() {
      this.loading = true
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const formData = new FormData()
          formData.append('title', this.form.title)
          formData.append('description', this.form.description)
          formData.append('type', this.form.type)
          this.$refs.upload.sFileList.forEach(img => {
            img.originFileObj && formData.append('img', img.originFileObj)
          });
          if (this.form._id) {
            formData.append('_id', this.form._id)
            putObj(formData).then(res => {
              this.handleCancel()
              this.$emit('refresh')
              this.$message.success('修改成功')
              this.$refs.ruleForm.resetFields()
            }).finally(() => {
              this.loading = false
            })
          } else {
            addObj(formData).then(res => {
              this.handleCancel()
              this.$emit('refresh')
              this.$message.success('新增成功')
              this.$refs.ruleForm.resetFields()
            }).finally(() => {
              this.loading = false
            })
          }
        } else {
          this.loading = false
        }
      });
    }
  }
}
</script>
